<template>
    <div class="body">
        <!-- <p class="title">大学食代商家后台</p> -->
        <div class="login_header">
            <i class="iconfont icon-daxueshidai- logo"></i>
        </div>
        <section class="login_message">
            <input type="number" maxlength="11" placeholder="预留手机号码" v-model="phone">
        </section>
        <section class="login_message">
            <input type="password" maxlength="12" placeholder="请输入密码" v-model="pwd" v-if="!isShowPwd">
            <input type="text" maxlength="12" placeholder="请输入密码" v-model="pwd" v-else>
            <mt-switch v-model="isShowPwd" class="is_show_pwd"></mt-switch>
        </section>
        <section class="login_message set_pwd">
            <label class="remember_content"><input type="checkbox" v-model="rememberPwd" name="rememberPwd" class="remember_pwd">记住密码</label>
            <router-link to="/rePwd">忘记密码?</router-link>
        </section>
        <section class="login_message">
            <mt-button class="btn" @click="login">登录</mt-button>
        </section>
        <section class="login_message">
                <router-link to="/register">
                    <div  class="to_reg">注册商家</div>
                </router-link>
        </section>
    </div>
</template>
<script>
import {login} from '../api'
import {Toast} from 'mint-ui'
import {getCookie,setCookie,delCookie} from '../Cookie'
export default {
    data() {
        return {
            isShowPwd:false,
            phone:"",
            pwd:"",
            rememberPwd:true,
        }
    },
    created(){
        this.phone = getCookie("phone")
        this.pwd = getCookie("pwd")
    },
    methods:{
        login(){
            let reg = /^1[3-9]\d{9}$/
            if(!this.phone){
                Toast("请输入用户名称")
                return;
            }else if(!reg.test(this.phone)){
              Toast('请输入正确的手机号码')
              return;
            }else if(!this.pwd){
                Toast("请输入密码")
                return;
            }
            const data={phone:this.phone,pwd:this.pwd}
            login(data).then(res=>{
                console.log(res);
                if(res.code!==200){
                    Toast(res.msg)
                }else{
                    if(this.rememberPwd){
                        setCookie('phone', this.phone, 7); //保存帐号到cookie，有效期7天
                        setCookie('pwd', this.pwd, 7); //保存密码到cookie，有效期7天
                    }else{
                        delCookie('phone')
                        delCookie('pwd')
                    }
                    Toast(res.msg)
                    this.$store.commit("LOGIN",res.data)
                    this.$router.push("/")
                }
            })
        }
    }
}
</script>
<style scoped>
    .body{
        text-align: center;
    }
    .login_header{
        width: 100%;
        height:9rem;
        background-image: url('../images/login_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }
    .login_header::before{
        content: "";
        display: table;
    }
    .logo{
        font-size: 4rem;
        line-height: 8rem;
    }
    .is_show_pwd {
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        left: 75%;
    }
    .remember_content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
    }
    .title{
        font-size: 2rem;
        font-weight: bolder;
        color: #F0463C;
        line-height: 5rem;
    }
    .to_reg{
        width: 80%;
        padding: 0.6rem 0;
        border-radius: 5px;
        margin: auto;
        color: #F0463C;
        text-decoration: underline;
    }
    .btn{
        background: #F0463C;
        color: #fff;
        border-radius: 30px;
    }
        .set_pwd{
        height: 6rem;
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
    }
    .set_pwd a{
        color: #F0463C;
        text-decoration: underline;
        font-size: 0.95rem;
    }
        .remember_pwd{
        width: 1rem;
        height: 1rem;
        margin: 0 1.4rem 0 0;
        position: relative;
    }
    .remember_pwd::after{
        position: absolute;
        width: 1.4rem;
        height: 1.4rem;
        top: -0.1rem;
        left: -0.2rem;
        content: "";
        background: #F0463C;
        color: #fff;
        display: inline-block;
        border-radius: 0.2rem;
        text-align: center;
        line-height: 1.4rem;
    }
    .remember_pwd:checked::after{
        content: "✓";
    }
</style>